<template>
  <div>
    <el-button v-bind="$attrs" @click="open"><slot></slot></el-button>
    <DialogForm :form-data="formData" :fields="fields" :value="dialogState" v-bind="$attrs" @submit="submit">
      <template v-for="field in fieldsSlot">
        <template v-slot[field.slot]="{value}" >
          <slot :name="field.slot" :value="value"></slot>
        </template>
      </template>
    </DialogForm>
  </div>
</template>
<script >
import http from "network/http";

export default {
  name: "EditFormButton" ,
  props:{
    primaryId: null ,
    fields: {
      type: Array ,
      required: true
    },
    url: {
      type: String ,
      required: true
    },
    method: "POST" ,
    formData: {
      type: Object ,
      required: true
    }
  },
  data(){
    return{
      dialogState: false
    }
  },
  mounted() {
  },
  computed:{
    fieldsSlot(){
      return this.fields.filter(f=>!f.slot)
    }
  },
  methods:{
    open(){
      this.dialogState = true
    },
    submit(){
      http({
        url: `${this.url}/saveOrUpdate` ,
        method: this.method ,
        data: this.formData
      }).then(res=>{
        this.$emit("editSuccess",res)
      })
    }
  }
}
</script>
<style scoped>

</style>
